<template>
	<view class="page-modify-dpi photo-operator">
		<view class="top-container flex-center">
			<template v-if="photoUrl">
				<view class="photo-wrap">
					<!-- 	<text class="photo-witdh">{{ detailInfo.widthPixel }}px</text>
					<text class="photo-height">{{ detailInfo.heightPixel }}px</text> -->
					<image class="photo-image" :style="photoImageStyle" :src="photoUrl" mode="aspectFit"></image>
				</view>

				<view class="reupload-button custom-button white-btn-gray-text" @tap="onChoosePhoto">
					<u-button type="primary" shape="circle" text="重新上传"></u-button>
				</view>

			</template>
			<template v-else>
				<view class="upload-box" @tap="onChoosePhoto">
					<text class="add-icon">+</text>
					<view class="add-text">点击上传你的照片</view>
				</view>
			</template>
		</view>

		<view class="field-container">
			<view class="normal-title-16 flex-center">
				设置分辨率
			</view>
			<view class="flex-start-center-gap-10 normal-title">
				<view>分辨率</view>
				<input v-model="setDPI" class="normal-input" type="number" maxlength="3"
					placeholder="请输入分辨率" />
				<text>DPI</text>
				<u-icon @tap="onShowInfo" name="/static/print/info.png" size="17"></u-icon>

			</view>
			
			<view class="custom-button full-button" @tap="onSavePhoto">
				<u-button type="primary" shape="circle" text="保存照片" :disabled="!couldSave"></u-button>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		computed,
	} from "vue";

	import {
		checkUploadImage,
		getImgScaleStyle,
		savePhoto,
	} from '@/common/js/method';

	const userImage = ref(''); //用户上传的图
	const imageInfo = ref({});
	const setDPI = ref('');

	const photoUrl = computed(() => {
		return userImage.value;
	});
	
	const couldSave = computed(() => {
		return userImage.value && setDPI.value;
	});

	// 缩放图片
	const photoImageStyle = computed(() => {
		return getImgScaleStyle(imageInfo.value.width, imageInfo.value.height)
	})
	
	const onShowInfo = () => {
		uni.$u.toast("DPI是图片分辨率的单位")
	}

	const onChoosePhoto = async () => {
		const res =  await checkUploadImage({
			limit: {
				width: 4000,
				height: 4000,
				fileSize: 3072, //3M
				types: ['JPG', 'JPEG', 'BMP', 'PNG'],
			}
		});
		userImage.value = res.uploadedSrc;
		imageInfo.value = {
			width: res.width,
			height: res.height,
			type: res.type
		};
	}

	// 修改DPI处理接口
	const processed = async () => {
		if (!userImage.value) {
			return;
		}
		uni.showLoading({
			title: '处理中'
		});
		const payload = {
			dpi: +setDPI.value,
			imageUrl: userImage.value,
		}
		const res = await uni.$request('/api/busi/photo/changeDpi', payload);
		await savePhoto(res.data.imageUrl)
		uni.hideLoading();
	}
	const toSuccess = () => {
		// 支付成功，跳转结果页（复用证件照制作结果页）
		uni.navigateTo({
			url: `/pages/make-photo/make-photo-save-res?title=操作完成&hideOrderBtn=true`,
		});
	}

	const onSavePhoto = async () => {
		if (!userImage.value) return;
		// 处理图片
		await processed();
		toSuccess()
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/photo-operator.scss";

	.page-modify-dpi {

		.top-container {
			height: calc(100vh - 486rpx);
		}

		.field-container {
			height: 486rpx;
		}
	}
</style>